<template>
    <headerTitle title="我的积分"></headerTitle>
    <backKey></backKey>
    <div class="fa fa-mail-reply back-key" @click="router.back()"></div>
    <div class="points-wrapper">
        <h3 class="points-header">剩余积分列表</h3>
        <ol v-if="pointsList.length > 0">
            <li v-for="points in pointsList" :key="points" class="points">
                <span class="points-left">{{ points.remainingPoints }}</span>
                <span class="points-right">{{ points.orderDate }}</span>
            </li>
        </ol>

        <div class="no-points" v-else>没有积分啦,快去下单吧</div>


    </div>
</template>

<script setup>
import headerTitle from '@/components/headerTitle.vue';
import backKey from '@/components/backKey.vue';
import { ref } from 'vue'
import { getPointListRequest } from '@/js/request';

let pointsList = ref([])
getPointListRequest((respon) => {
    if (respon.data.code == 200) {
        pointsList.value = respon.data.detail
    }
})
</script>

<style lang="scss" scoped>
.points-header {
    margin: 10px;
}

.points-wrapper {
    display: flex;
    position: relative;
    background: white;
    padding-bottom: 10px;
    margin-top: 14vw;
    flex-direction: column;
    height: 100%;


    .no-points {
        margin: 80vw auto 0 auto;
    }


}

.points-wrapper h3 {
    display: inline;
    font-size: 6.0vw;
    margin: 5px auto 10px auto;
    color: rgb(11, 128, 89);
}

.points {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 0px 10px 0px 10px;
    background-color: rgb(204, 237, 129);
    font-size: 4.8vw;
}
</style>